<template>
	<view>
		<cu-custom title="课程设置" bgColor="rgba(255,255,255,0)" rightText="完成" @rightClick="rightClick"></cu-custom>
		<u-sticky offset-top="0" :customNavHeight="44">
			<u-tabs @click="curriculumTypeTab" :list="curriculumTypeList" lineWidth="20" lineHeight="7"
				:lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
			        color: '#ea3457',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#333',
			        transform: 'scale(1)'
			    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
			</u-tabs>
		</u-sticky>
		<mescroll-body ref="mescrollRef">
		<view class="padding c-l d-p-b">
			
			<view class="teacher-list  bg-white p-15 ">
				<view class="w-1-0-0"  style="display: inherit">
				<view class="f-l">
					<view class="w-1-0-0 d-p-b c-l d-p-b" style="height: 20px;">
						
						<text class=" f-18 f-w-b f-l" >【一对一】冬季全托</text>
						<text class="open-cl c-red f-16 m-l-15 " style="display: inline-block;padding: 3px 15px;">接单中</text>
						
					</view>
					<view class="flex w-1-0-0 m-t-15 m-b-5">
						
						<text class="c-red  f-18">￥120/节</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>课程内容：物理</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>招生对象：高一、高二</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>最低起报节数：1节</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>课程时长：45分钟</text>
					</view>
				</view>
				<view class="right-box">
					<uni-icons type="closeempty" size="20" color="#999" class="f-r"></uni-icons>
					<view class="f-l flex shangjia">
						<uni-icons type="checkmarkempty" size="15" color="#EA3457" class="f-r cle-g"></uni-icons>
						<view>
							上架到<br/>学乐狮
						</view>
					</view>
				</view>
				</view>
				<view class="flex c-l button-z"><button>暂停接单</button><button>顶置课程</button></view>
			</view>
			<view class="teacher-list  bg-white p-15 ">
				<view class="w-1-0-0"  style="display: inherit">
				<view class="f-l">
					<view class="w-1-0-0 d-p-b c-l d-p-b" style="height: 20px;">
						
						<text class=" f-18 f-w-b f-l" >【一对一】冬季全托</text>
						<text class="open-cl c-red f-16 m-l-15 " style="display: inline-block;padding: 3px 15px;">接单中</text>
						
					</view>
					<view class="flex w-1-0-0 m-t-15 m-b-5">
						
						<text class="c-red  f-18">￥120/节</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>课程内容：物理</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>招生对象：高一、高二</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>最低起报节数：1节</text>
					</view>
					<view class="m-b-5 c-o-9">
						<text>课程时长：45分钟</text>
					</view>
				</view>
				<view class="right-box">
					<uni-icons type="closeempty" size="20" color="#999" class="f-r"></uni-icons>
					<view class="f-l flex shangjia">
						<uni-icons type="checkmarkempty" size="15" color="#EA3457" class="f-r cle-g"></uni-icons>
						<view>
							上架到<br/>学乐狮
						</view>
					</view>
				</view>
				</view>
				<view class="flex c-l button-z"><button>暂停接单</button><button>顶置课程</button></view>
			</view>
			
			
			
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import comment from './components/comment.vue' //评论
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			comment
		},
		data() {
			return {
				curriculumTypeList: [{
					name: '全部'
				},
				{
					name: '托管'
				},
				{
					name: '兴趣班'
				},
				{
					name: '一对一'
				}
				],
			}
		},
		methods: {
			//导航顶部右边跳转 
			rightClick(){
				uni.navigateTo({
					url: '../mechanism/bindteacher'
				});
			},
			//切换Tab
			curriculumTypeTab(item) {
				this.curriculumIndex = item.index
			},
			
			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				// this.getList(pageNum)
				this.mescroll.endErr(); // 请求失败,隐藏加载状态
			},
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.teacher-list{ border-radius: 10px; margin-bottom: 15px;}
.button-t{display: block; padding-bottom: 45px;
	button{ background: none; border: 1px solid #ddd; color: #666; font-size: 13px; border-radius: 50px; margin: 15px 5px; width: auto; float: right;}
}
.bg-b{background: blue; padding: 2px 7px; margin-top: 5px; border-radius: 10px 10px 10px 0px;}
.top-text{ border-radius: 10px; padding: 10px 15px; margin-bottom: 10px; color: #999; height: 40px;}
.open-cl{ border: 1px solid #EA3457; border-radius: 20px;}
.cle-g{border: 1px solid #EA3457; color: #EA3457; border-radius: 20px; height: 20px; width: 20px; line-height: 20px; margin-top: 7px; margin-left: 15px; margin-right: 5px;}
.shangjia{ margin-top: 45px;

}
.button-z{button{ width: 50%; border: 0; background: none; font-size: 18px; height: 30px; line-height: 30px; margin-top: 10px;}
uni-button:after{border: 0;}
}
</style>
